<template>
  <!-- 单点登陆授权应用详情抽屉 -->
  <div class="server-ssoAppInfo-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>单点登陆授权应用详情</h4>
      </template>
      <el-descriptions
              class="margin-top"
              :column="3"
              border
              style="margin: 8px;"
      >
          <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  主键id
                </div>
              </template>
              {{ formData.id }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  应用名称
                </div>
              </template>
              {{ formData.appName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template #label>
              <div class="cell-item">
                应用logo
              </div>
            </template>
            <el-image
                style="width: 150px; height: 150px"
                v-if="!proxy.isEmpty(formData.logo)"
                :src="proxy.getUpFileUrl(formData.logo)"
                fit="contain"></el-image>
          </el-descriptions-item>
          <el-descriptions-item :span="5">
              <template #label>
                <div class="cell-item">
                  应用id
                </div>
              </template>
              {{ formData.clientId }}
          </el-descriptions-item>
          <el-descriptions-item :span="5">
              <template #label>
                <div class="cell-item">
                  应用密钥
                </div>
              </template>
              {{ formData.clientSecret }}
          </el-descriptions-item>
          <el-descriptions-item :span="5">
              <template #label>
                <div class="cell-item">
                  应用描述
                </div>
              </template>
              {{ formData.description }}
          </el-descriptions-item>
          <el-descriptions-item :span="5">
              <template #label>
                <div class="cell-item">
                  应用主页
                </div>
              </template>
              {{ formData.pageIndex }}
          </el-descriptions-item>
          <el-descriptions-item :span="5">
              <template #label>
                <div class="cell-item">
                  回调地址
                </div>
              </template>
              {{ formData.callBackUrl }}
          </el-descriptions-item>
          <el-descriptions-item :span="5">
                <template #label>
                  <div class="cell-item">
                    权限
                  </div>
                </template>
                <el-tag class="ml-2" type="success" v-for="(item,key) in formData.accessInfo" :key="'accessInfo-'+key">
                  {{ proxy.getOptionValue(item, accessInfoOptions,'value','label') }}
                </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  创建人
                </div>
              </template>
              {{ formData.createdBy }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  修改人
                </div>
              </template>
              {{ formData.updatedBy }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template #label>
              <div class="cell-item">
                创建日期
              </div>
            </template>
            {{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}
          </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
  import {
    listSsoAppInfo,
    getSsoAppInfo,
    delSsoAppInfo,
    addSsoAppInfo,
    updateSsoAppInfo,
  } from "/@/api/system/sso/server/ssoAppInfo";
  import {getToken} from "/@/utils/gfast"
  import {
    SsoAppInfoTableColumns,
    SsoAppInfoInfoData,
    SsoAppInfoTableDataState,
    SsoAppInfoEditState
  } from "/@/views/system/sso/server/ssoAppInfo/list/component/model"
  defineOptions({ name: "ApiV1SsoServerSsoAppInfoDetail"})
  const props = defineProps({
    accessInfoOptions:{
      type:Array,
      default:()=>[]
    },
  })
  const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
  const {proxy} = <any>getCurrentInstance()
  const formRef = ref<HTMLElement | null>(null);
  const menuRef = ref();
  //图片上传地址
  const imageUrlLogo = ref('')
  //上传加载
  const upLoadingLogo = ref(false)
  const state = reactive<SsoAppInfoEditState>({
    loading:false,
    isShowDialog: false,
    formData: {
      id: undefined,
      appName: undefined,
      clientId: undefined,
      clientSecret: undefined,
      logo: undefined,
      description: undefined,
      pageIndex: undefined,
      callBackUrl: undefined,
      accessInfo: [] ,
      createdBy: undefined,
      updatedBy: undefined,
      createdAt: undefined,
      updatedAt: undefined,
      deletedAt: undefined,
    },
    // 表单校验
    rules: {
      id : [
          { required: true, message: "主键id不能为空", trigger: "blur" }
      ],
      appName : [
          { required: true, message: "应用名称不能为空", trigger: "blur" }
      ],
      clientSecret : [
          { required: true, message: "应用密钥不能为空", trigger: "blur" }
      ],
      updatedBy : [
          { required: true, message: "修改人不能为空", trigger: "blur" }
      ],
    }
  });
  const { isShowDialog,formData } = toRefs(state);
  // 打开弹窗
  const openDialog = (row?: SsoAppInfoInfoData) => {
    resetForm();
    if(row) {
      getSsoAppInfo(row.id!).then((res:any)=>{
        const data = res.data;
        //单图地址赋值
        imageUrlLogo.value = data.logo ? proxy.getUpFileUrl(data.logo) : ''
        data.accessInfo = data.accessInfo.split(",")
        data.createdBy = data.createdUser?.userNickname
        data.updatedBy = data.updatedUser?.userNickname
        state.formData = data;
      })
    }
    state.isShowDialog = true;
  };
  // 关闭弹窗
  const closeDialog = () => {
    state.isShowDialog = false;
  };
  defineExpose({
    openDialog,
  });
  // 取消
  const onCancel = () => {
    closeDialog();
  };
  const resetForm = ()=>{
    state.formData = {
      id: undefined,
      appName: undefined,
      clientId: undefined,
      clientSecret: undefined,
      logo: undefined,
      description: undefined,
      pageIndex: undefined,
      callBackUrl: undefined,
      accessInfo: [] ,
      createdBy: undefined,
      updatedBy: undefined,
      createdAt: undefined,
      updatedAt: undefined,
      deletedAt: undefined,
    }
  };
  //单图上传应用logo
  const handleAvatarSuccessLogo:UploadProps['onSuccess'] = (res, file) => {
    if (res.code === 0) {
      imageUrlLogo.value = URL.createObjectURL(file.raw!)
      state.formData.logo = res.data.path
    } else {
      ElMessage.error(res.msg)
    }
    upLoadingLogo.value = false
  }
  const beforeAvatarUploadLogo = () => {
    upLoadingLogo.value = true
    return true
  }
  const setUpData = () => {
    return { token: getToken() }
  }
</script>
<style scoped>
  .server-ssoAppInfo-detail :deep(.avatar-uploader .avatar) {
    width: 178px;
    height: 178px;
    display: block;
  }
  .server-ssoAppInfo-detail :deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .server-ssoAppInfo-detail :deep(.avatar-uploader .el-upload:hover) {
    border-color: var(--el-color-primary);
  }
  .server-ssoAppInfo-detail :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .server-ssoAppInfo-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>
